<!-- eslint-disable vue/valid-v-for -->
<template>
  <div>
    <div class="day">
      <!-- 导航栏 -->
      <van-nav-bar title="跑步" left-text="返回" left-arrow @click-left="onClickLeft" />
      <!-- 日期 -->
      <van-tabs>
        <van-tab v-for="index in 4" :title="'日'"> 内容 {{ index }} </van-tab>
      </van-tabs>
    </div>

    <van-floating-panel v-model:height="height" :anchors="anchors">
      <div style="text-align: center; padding: 15px">
        <div class="Morningjog">
          <p>晨跑</p>
          <span>2024-11-16</span>
          <h4></h4>
        </div>
      </div>
    </van-floating-panel>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const onClickLeft = () => history.back()

const anchors = [100, Math.round(0.4 * window.innerHeight)]
const height = ref(anchors[0])
</script>

<style lang="css">
.day {
  height: 200vw;
  background-color: rgb(1, 4, 13);
  color: aliceblue;
}
.van-tabs__nav {
  background-color: black;
}
.van-tab {
  color: aliceblue;
  font-size: 4vw;
}
.van-tab--active {
  font-size: 6vw;
  color: aliceblue;
}
.Morningjog {
  width: 100%;
  height: 20vw;
  border: 1px solid #000;
}
</style>
